<template>
  <div class="main">
    <div class="header">
      <h2 class="p-12 f-20">{{ $t('pcb.Physicalsimulation') }}</h2>
      <div class="p-12 check" @click="toggleFullScreen">
        <el-icon class="color"><View /></el-icon>
        <span>{{ $t('pcb.Fullscreenview') }}</span>
      </div>
    </div>
    <div class="view" ref="fullscreenTarget">
      <div class="view-header">
        <ul>
          <li>
            <div v-show="isShow" class="p-a">
              <h3 class="flxe">Layers:</h3>
              <div class="m-16" v-for="(item, index) in smtLayerlist" :key="item.name">
                <el-checkbox
                  @change="handleCheckedLayers(index, item.enabled)"
                  :checked="item.enabled"
                  :label="gerber.layerNames[item.side + '' + item.type]"
                  size="small"
                />
              </div>
            </div>
          </li>
          <li>
            <div class="tabs">
              <span
                v-for="item in tabs"
                :class="item.id == activeItem ? 'active' : ''"
                :key="item.id"
                @click="handleTabs(item)"
                >{{ item.name }}</span
              >
            </div>
            <p class="m-top-10">{{ $t('pcb.pictureis') }}</p>
          </li>
          <li>
            <div>
              <!-- <div class="h-24" @click="handleLeft">
                <img class="img" :src="images['top']" alt="" />
              </div>
              <div class="h-24">
                <img class="img" :src="images['le']" alt="" @click="handleTop" />
                <span class="null"></span>
                <img class="img" :src="images['ri']" alt="" @click="handleBottom" />
              </div>
              <div class="h-24" @click="handleRight">
                <img class="img" :src="images['bott']" alt="" />
              </div> -->
            </div>
          </li>
        </ul>
      </div>
      <div class="content" ref="canvasContainer"></div>
    </div>
  </div>
</template>
<script setup>
import { View } from '@element-plus/icons-vue';
import { ref, reactive, inject, onMounted, onBeforeMount } from 'vue';
import View3d from '../../utils/3dView';
import Gerber from '../../utils/gerber';
const images = inject('images');
const view3D = new View3d();
const gerber = new Gerber();
const canvasContainer = ref(null);
const checkList = ref([]);
const smtLayerlist = ref([]);
const props = defineProps({
  renderData: {
    type: Array,
  },
  gerberData: {
    type: Array,
  },
});
const emit = defineEmits(['getDimensions']);
const fullscreenTarget = ref(null);
const activeItem = ref(2);
const tabs = reactive([
  {
    name: '2D',
    di: 1,
  },
  {
    name: '3D',
    id: 2,
  },
]);

const dele = () => {
  view3D.remove();
};

/**
 * 选中的图层显示隐藏
 * @param {*} val
 */
const handleCheckedLayers = (val, enabled) => {
  let isEnable = enabled == false ? true : false;
  view3D.checkSmtUpdate(val, isEnable);
};

/**
 * 获取默认选中的图层
 */
const getLayerChecked = () => {
  const arr = [];
  smtLayerlist.value.forEach((ele) => {
    ele.enabled = true;
    arr.push(gerber.layerNames[ele.side + '' + ele.type]);
  });
  checkList.value = arr;
};

// 偏移量
let offsetData = reactive({
  x: 0,
  z: 0,
});

const handleTabs = (item) => {
  activeItem.value = item.id;
  view3D.setSwitch(item.name);
};

const handleTop = () => {
  offsetData.x += 5;
  view3D.setOffset(offsetData.x, 0);
};

const handleBottom = () => {
  offsetData.x -= 5;
  view3D.setOffset(offsetData.x, 0);
};

const handleLeft = () => {
  offsetData.z += 5;
  view3D.setOffset(0, offsetData.z);
};

const handleRight = () => {
  offsetData.z -= 5;
  view3D.setOffset(0, offsetData.z);
};

/**
 * 全屏
 */
const toggleFullScreen = () => {
  const element = fullscreenTarget.value;
  isShow.value = true;
  if (document.fullscreenElement) {
    // 如果已经处于全屏状态，则退出全屏
    document.exitFullscreen();
  } else {
    isShow.value = true;
    // saveData();
    getLayerChecked();
    // 进入全屏模式
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
};

view3D.initScene();
/**
 * 读取文件加载生成模型
 */
async function readFiles(renderData, gerberData) {
  const arr = [];

  view3D.remove();
  renderData.forEach((ele, index) => {
    const g = view3D.gerber.load(ele);
    const guess = view3D.gerber.guessLayer(gerberData[index].customerFileName);
    if (guess) {
      g.side = guess[0];
      g.type = guess[1];
    } else {
      g.side = 2;
      g.type = 1;
    }
    g.name = gerberData[index].customerFileName;
    arr.push(g);
  });

  getLayers(arr);
  getLayerChecked();
  setTimeout(function () {
    view3D.init(arr, canvasContainer);
    getWH();
    // setTimeout(() => {
    //   // view3D.showOutline();
    // }, 1000);
  }, 0);
}

let isShow = ref(false);
/**
 * 获取部分显示的图层
 */
const getLayers = (data) => {
  smtLayerlist.value = data;
};

const getWH = () => {
  const { w, h } = view3D.getDimensions();
  const formatDim = {
    w: w / 10,
    h: h / 10,
  };
  emit('getDimensions', formatDim);
};

defineExpose({
  readFiles,
});

const getShow = () => {
  isShow.value = false;
};

/**
 * 监听全屏事件
 */
const handleFullscreenChange = () => {
  if (!document.fullscreenElement) {
    getShow();
  }
};

onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange);
});
onBeforeMount(() => {
  // document.removeEventListener('fullscreenchange', handleKeyDown);
});
</script>
<style lang="scss" scoped>
.flxe {
  display: flex;
}
.p-a {
  position: absolute;
}
.m-16 {
  margin-left: 5px;
  display: flex;
}

.main {
  width: 302px;
  height: 302px;
  border-radius: 4px;
  opacity: 1;
  background: #ffffff;
  box-shadow: 0 0 14px 0 #f2f2fa;
  margin-bottom: 12px;
  .header {
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .check {
      display: flex;
      align-items: center;
      font-size: 18px;
      span {
        margin-left: 8px;
        color: #5255fe;
        font-size: 18px;
        cursor: pointer;
      }
      .color {
        color: #5255fe;
        cursor: pointer;
      }
    }
  }
  .view {
    width: 100%;
    height: 246px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .view-header {
      position: absolute;
      top: 12px;
      width: calc(100% - 24px);
      height: 80px;

      ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        li {
          text-align: center;
          flex: 1;
          .null {
            width: 24px;
            height: 24px;
            display: inline-block;
          }
        }
        span {
          color: #383838;
          font-size: 14px;
          font-weight: 400;
        }
        .cor {
          color: #5255fe;
          cursor: pointer;
        }
        p {
          color: #a6a6a6;
          font-size: 12px;
          font-weight: 400;
        }
        .tabs {
          display: flex;
          width: 200px;
          height: 36px;
          border: 1px solid #5255fe;
          border-radius: 4px;
          box-sizing: border-box;
          span {
            flex: 1;
            text-align: center;
            line-height: 36px;
            font-size: 14px;
            font-weight: 500;
            color: #5255fe;
            cursor: pointer;
            background: #ffffff;
          }
          .active {
            color: #ffffff;
            background: #5255fe;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
          }
        }
        .h-24 {
          height: 24px;
        }
        .img {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
        .m-top-10 {
          margin-top: 10px;
          color: #383838;
        }
      }
    }
  }
  .content {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    background: #f2f2fa;
  }
}

.p-12 {
  padding: 0 12px;
}
.f-20 {
  font-size: 20px;
  color: #383838;
}
</style>
